<template>

    <div class="kuai" v-if="luckitem">
      <img
        :src="luckitem.goodsimg"
        mode="widthFix"
        @click="showimg(luckitem.goodsimg)"
      />
      <div class="text" @click="showitem(luckitem.id)">
        <div class="text1">{{luckitem.patronname}} 赞助</div>
        <div class="text2">奖品：{{luckitem.goodsname}}</div>
        <div class="text3">{{luckitem.endtime}} 自动开奖</div>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    luckitem: {
      default: {
        id: 12,
        patronname: '成都黑眼圈',
        goodsimg: 'https://img10.360buyimg.com/imgzone/jfs/t29257/22/667754256/255215/c9590400/5bfad6b5Nc897d51d.jpg',
        goodsname: '秋冬新品衣服一件',
        endtime: '11月27日 18:00',
        count: 1000
      }
    }
  },
  methods: {
    showimg (img) {
      wx.previewImage({
        current: img, // 当前显示图片的http链接
        urls: [img] // 需要预览的图片http链接列表
      })
    },
    showitem (id) {
      console.log('参与项目:' + id)
      this.$router.push({path: '/pages/show/main', query: {id}})
    }
  }
}
</script>
<style lang="scss" scoped>
.kuaiA{
  .kuai{
    background:#fff;
    margin-top:30rpx;
    padding-bottom:20rpx;
    border-radius: 5rpx;
    border: 1px solid #dddada;
    img{
      width:100%;
      border-top-left-radius:5rpx;
      border-top-right-radius:5rpx;
    }
    .text{padding-left:40rpx;line-height:150%;
      .text1{
        font-size:30rpx;
        color:rgb(221, 7, 7);
        font-weight: bold;
      }
      .text2{
        color: rgba(0,0,0,0.8);
        display: inline;
      }
      .text3{
        font-size: 13px;
        letter-spacing: .3px;
        color: #808080;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
